<!-- tab公共组件 -->
<template>
  <div id="commonTab">
    <ul class="commonTabList">
      <li v-for="(item, index) in tabList" :class="{active: tabIndex===index}" @click="toggleTab(index)">
        <span>{{item}}</span>
        <div class="line" v-if="tabIndex===index"></div>
      </li>
    </ul>
    <slot></slot>
  </div>
</template>

<script>
  export default {
    name: 'commonTab',
    methods: {
      /**
       * 切换Tab
       * @param index 点击当前Tab的索引
       */
      toggleTab (index) {
        this.$emit('toggleTab', index)
      }
    },
    props: {
      // Tab列表数组
      tabList: {
        default: [],
        type: Array
      },
      // Tab的当前选中索引
      tabIndex: {
        type: Number
      }
    }
  }
</script>

<style lang="scss">
  #commonTab {
    padding-left: 35px;
    border-bottom: 1px solid #e8e8e8;
    text-align: left;
    margin-bottom: 30px;

    .commonTabList {
      li {
        display: inline-block;
        font-size: 16px;
        color: #606266;
        margin-right: 45px;
        padding-top: 17px;
        cursor: pointer;

        span {
          display: inline-block;
          padding: 0 6px;
          margin-bottom: 13px;
        }

        &:last-child {
          margin-right: 0;
        }

        &.active {
          color: #6666FF;
        }

        &:hover {
          color: #6666FF;
        }
        .line {
          width: 100%;
          height: 4px;
          background: #6666FF;
          border-radius: 10px;
        }
      }
    }

  }
</style>
